.main_index {
	$flex;
	$flex_column_nowrap;
	width: 100%;
	max-width: $main_max_width;
	margin: $main_column_gap 0;
}

.main_index h1 {
	font-size: 3.5rem;
	font-weight: 700;
	margin: 0;
	margin-bottom: 3px;
}

.main_index h2 {
	font-size: 1.5rem;
	margin: 0;
	margin-bottom: 3px;
}

.main_index > .content {
	margin-top: $main_row_gap;

	$flex;
	$flex_row_nowrap;
}

.main_index > .content > article {
	margin-right: $main_column_gap;

	width: 100%;
	max-width: $main_grid_unit_2x;
}

.main_index > .content > nav {
	font-size: 1.5rem;

	$flex_shrink_off;
}

.main_index nav a:not(:last-of-type) {
	margin-bottom: 16px;
}

$screen_tablet_l2 {
	.main_index .content {
		$flex_column_nowrap;
	}

	.main_index > .content > article {
		margin-right: 0;
		margin-bottom: $main_row_gap;
	}

	.main_index nav {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		-moz-column-gap: $main_column_gap;
		-webkit-column-gap: $main_column_gap;
		column-gap: $main_column_gap;
	}

	.main_index nav > a {
		break-inside: avoid-column;
	}

	/* workarouds for Firefox */
	@supports not (break-inside: avoid-column) {
		.main_index nav > a {
			page-break-inside: avoid;
			overflow: hidden;
		}
	}

	.main_index nav > a:nth-of-type(2) {
		break-after: column;
	}
}

$screen_mobile_l2 {
	.main_index nav {
		-moz-column-count: auto;
		-webkit-column-count: auto;
		column-count: auto;
	}

	.main_index h1 {
		font-size: 2.8125rem;
	}

	.main_index h2 {
		font-size: 1.25rem;
	}
}

$screen_mobile_l3 {
	.main_index h1 {
		font-size: 2.125rem;
	}
}
